<style>
    #menu_auth_info .label.label-xlg {
        margin-bottom: 5px;
        margin-right: 5px;
    }

    .help-inline {
        padding-left: 8px
    }
</style>
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title">菜单信息操作</h4>
</div>
<div class="modal-body">
    <div class="page-content">
        <div class="row">
            <div class="col-xs-12">
                <form class="form-horizontal" role="form" id="validation-form">
                    <input type="hidden" name="pid" id="pid" value="${pid!''}">
                    <input type="hidden" name="id" id="id" value="${(menu.id)!''}">
                    <div class="form-group">
                        <div class="profile-user-info profile-user-info-striped">
                            <div class="profile-info-row">
                                <div class="profile-info-name">菜单名称</div>
                                <div class="profile-info-value">
                                    <input type="text" name="menuName" id="menuName" placeholder="请填写菜单名称..."
                                           value="${(menu.menuName)!''}">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="profile-user-info profile-user-info-striped">
                            <div class="profile-info-row">
                                <div class="profile-info-name">类型：</div>
                                <div class="profile-info-value">
                                    <label>
                                        <input type="radio" name="isButton"
                                               value="1"
                                               <#if (menu.isButton)?? && (menu.isButton == '1')>checked="checked"</#if>/>
                                        菜单
                                    </label>
                                    <label>
                                        <input type="radio" name="isButton" value="2"
                                               <#if !(menu.isButton)?? || (menu.isButton != '1')>checked="checked"</#if>/>
                                        功能
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group"  <#if !(menu.isButton)?? || ((menu.isButton) != '1')> hidden</#if>
                         id="menuUrlShow">
                        <div class="profile-user-info profile-user-info-striped">
                            <div class="profile-info-row">
                                <div class="profile-info-name">菜单地址</div>
                                <div class="profile-info-value">
                                    <input type="text" name="menuUrl" placeholder="请填写菜单地址..." id="menuUrl"
                                           value="${(menu.menuUrl)?default('')}">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="profile-user-info profile-user-info-striped">
                            <div class="profile-info-row">
                                <div class="profile-info-name">是否需要权限</div>
                                <div class="profile-info-value">
                                    <label>
                                        <input type="radio" name="needPermission"
                                               value="1"
                                               <#if (menu.menuPermissions)?? && (menu.menuPermissions?size > 0)>checked</#if>/>
                                        需要
                                    </label>
                                    <label>
                                        <input type="radio" name="needPermission"
                                               value="2"
                                               <#if !(menu.menuPermissions)?? || !(menu.menuPermissions?size > 0)>checked</#if>/>
                                        不需要
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group" id="menuPermissions"
                         <#if !(menu.menuPermissions)?? || !(menu.menuPermissions?size > 0)>hidden</#if>>
                        <div class="profile-user-info profile-user-info-striped">
                            <div class="profile-info-row">
                                <div class="profile-info-name">权限信息</div>
                                <div class="profile-info-value" id="permissionInfo">
                                    <select multiple="" style="width:250px;" id="permissionIds"
                                            name="permissionIds" data-placeholder="选择权限...">
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group" id="menuPermissionsRel"
                         <#if !(menu.menuPermissions)?? || !(menu.menuPermissions?size > 1)>hidden</#if>>
                        <div class="profile-user-info profile-user-info-striped">
                            <div class="profile-info-row">
                                <div class="profile-info-name">权限关系</div>
                                <div class="profile-info-value" id="permissionRelType">
                                    <label class="radio-inline">
                                        <input type="radio" name="relType" value="1"
                                               <#if !(menu.menuPermissions)?? || !(menu.menuPermissions?size > 1)>disabled</#if>
                                               <#if (menu.menuPermissions)??&&(menu.menuPermissions?size > 0)&&(menu.menuPermissions[0].relType == 1)||(!(menu.menuPermissions)?? || !(menu.menuPermissions?size > 0))>checked</#if>>
                                        且关系
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="relType" value="2"
                                               <#if !(menu.menuPermissions)?? || !(menu.menuPermissions?size > 1)>disabled</#if>
                                              <#if (menu.menuPermissions)??&&(menu.menuPermissions?size > 0)&&(menu.menuPermissions[0].relType == 2)>checked</#if>>
                                        或关系
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="modal-footer">
    <button class="btn btn-info" type="button" id="submitMenu">
        <i class="icon-ok bigger-110"></i>
        确认
    </button>
</div>

<!-- 页面渲染js -->
<script>
    // 展示菜单地址
    $("input[name='isButton']").change(function () {
        var isButton = $("input[name='isButton']:checked").val();
        if (isButton == 1) {
            $('#menuUrlShow').show();
            $("#menuUrl").attr("disabled", false);
        } else {
            $('#menuUrlShow').hide();
            $("#menuUrl").attr("disabled", true);
        }
    });

    // 获取是否需要设置访问权限
    $("input[name='needPermission']").change(function () {
        var needPermission = $("input[name='needPermission']:checked").val();
        if (needPermission == 1) {
            $('#menuPermissions').show();
            extracted();
        } else {
            $("#permissionIds").empty();
            $("#permissionIds").trigger("liszt:updated");//修改选中或添加项必须增加这一行
            $("#permissionIds").chosen();
            $('#menuPermissions').hide();
        }
    });

    $(function () {
        if ($('#id') && $('#id').val() != '') {
            var needPermission = $("input[name='needPermission']:checked").val();
            if (needPermission == 1) {
                extracted();
            }
        }
    });

    function extracted() {
        $('#permissionIds').addClass('tag-input-style');
        //进行ajax传值
        $.ajax({
            url: "${request.contextPath}/sys/permission/doAll.do",
            type: "post",
            dataType: "json",
            data: {
                permissionStatus: 1,
                menuId: '${(menu.id)!''}'
            },
            success: function (msg) {
                $.each(msg.results, function (i, item) {
                    $("#permissionInfo select").append("<option value='" + item.id + "'" + item.selected + ">" + item.permissionName + "</option>");
                });
                $("#permissionIds").trigger("liszt:updated");//修改选中或添加项必须增加这一行
                var chosen = $("#permissionIds").chosen();
                chosen.on('change', function (evt, params) {
                    if ($(this).val() != null && $(this).val().length > 1) {
                        $('#menuPermissionsRel').show();
                        $("input[name = relType]").attr("disabled", false);
                    } else {
                        $("input[name = relType]").attr("disabled", true);
                        $('#menuPermissionsRel').hide();
                    }
                });
            }
        });
    }
</script>

<!-- 操作js -->
<script>
    // 提交表单
    $('#submitMenu').click(function () {
        $('#validation-form').submit();
    });
    // 校验
    var validator = $('#validation-form').validate({
        errorPlacement: function (error, element) {
            $(element).parent().append(error);
        },
        errorElement: 'label',
        errorClass: 'help-inline',
        focusInvalid: true,
        onfocusout: false,
        rules: {
            menuName: {
                required: true
            },
        },
        messages: {
            menuName: {
                required: '请填写菜单名称'
            },
        },
        invalidHandler: function (event, validator) { //display error alert on form submit
            $('.alert-danger', $('#validation-form')).show();
        },
        highlight: function (e) {
            $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
        },
        success: function (e) {
            $(e).closest('.form-group').removeClass('has-error').addClass('has-info');
            $(e).remove();
        },
        errorPlacement: function (error, element) {
            error.insertAfter(element);
        },
        submitHandler: function (form) {
            //进行ajax传值
            $.ajax({
                url: "doOperate.do",
                type: "post",
                dataType: "json",
                data: $(form).serializeJson(),
                success: function (msg) {
                    //要执行的代码
                    if (!msg.success) {
                        layer.msg(msg.msg);
                        return;
                    }
                    var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
                    var node = treeObj.getSelectedNodes()[0];
                    node.menuName = msg.result.menuName;
                    node.id = msg.result.id;
                    node.pid = msg.result.pid;
                    treeObj.updateNode(node);
                    menuClick(null, "treeDemo", node);
                    $('#menuModal').modal('hide');
                    layer.msg("修改成功", {icon: 6, time: 500});
                }
            });
            return false;
        }
    });
</script>